<!-- Settings Modal -->
<div id="settingsModal" class="modal">
    <div class="modal-content settings-modal">
        <button class="close" onclick="modalManager.closeModal('settingsModal')">&times;</button>
        <h2>{{ t('common.actions.settings') }}</h2>
        <div class="settings-form">
            <div class="setting-item api-key-item">
                <div class="setting-row">
                    <div class="setting-info">
                        <label for="civitaiApiKey">{{ t('settings.civitaiApiKey') }}:</label>
                    </div>
                    <div class="setting-control">
                        <div class="api-key-input">
                            <input type="password" 
                                id="civitaiApiKey" 
                                placeholder="{{ t('settings.civitaiApiKeyPlaceholder') }}"
                                value="{{ settings.get('civitai_api_key', '') }}"
                                onblur="settingsManager.saveInputSetting('civitaiApiKey', 'civitai_api_key')"
                                onkeydown="if(event.key === 'Enter') { this.blur(); }" />
                            <button class="toggle-visibility">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="input-help">
                    {{ t('settings.civitaiApiKeyHelp') }}
                </div>
            </div>
            
            <div class="settings-section">
                <h3>{{ t('settings.sections.contentFiltering') }}</h3>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="blurMatureContent">{{ t('settings.contentFiltering.blurNsfwContent') }}</label>
                        </div>
                        <div class="setting-control">
                            <label class="toggle-switch">
                                <input type="checkbox" id="blurMatureContent" checked 
                                       onchange="settingsManager.saveToggleSetting('blurMatureContent', 'blur_mature_content')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.contentFiltering.blurNsfwContentHelp') }}
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="showOnlySFW">{{ t('settings.contentFiltering.showOnlySfw') }}</label>
                        </div>
                        <div class="setting-control">
                            <label class="toggle-switch">
                                <input type="checkbox" id="showOnlySFW" value="{{ settings.get('show_only_sfw', False) }}" {% if settings.get('show_only_sfw', False) %}checked{% endif %}
                                       onchange="settingsManager.saveToggleSetting('showOnlySFW', 'show_only_sfw')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.contentFiltering.showOnlySfwHelp') }}
                    </div>
                </div>
            </div>
            
            <!-- Add Video Settings Section -->
            <div class="settings-section">
                <h3>{{ t('settings.sections.videoSettings') }}</h3>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="autoplayOnHover">{{ t('settings.videoSettings.autoplayOnHover') }}</label>
                        </div>
                        <div class="setting-control">
                            <label class="toggle-switch">
                                <input type="checkbox" id="autoplayOnHover" 
                                       onchange="settingsManager.saveToggleSetting('autoplayOnHover', 'autoplay_on_hover')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.videoSettings.autoplayOnHoverHelp') }}
                    </div>
                </div>
            </div>

            <!-- Add Layout Settings Section -->
            <div class="settings-section">
                <h3>{{ t('settings.sections.layoutSettings') }}</h3>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="displayDensity">{{ t('settings.layoutSettings.displayDensity') }}</label>
                        </div>
                        <div class="setting-control select-control">
                            <select id="displayDensity" onchange="settingsManager.saveSelectSetting('displayDensity', 'display_density')">
                                <option value="default">{{ t('settings.layoutSettings.displayDensityOptions.default') }}</option>
                                <option value="medium">{{ t('settings.layoutSettings.displayDensityOptions.medium') }}</option>
                                <option value="compact">{{ t('settings.layoutSettings.displayDensityOptions.compact') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.layoutSettings.displayDensityHelp') }}
                        <ul class="list-description">
                            <li><strong>{{ t('settings.layoutSettings.displayDensityOptions.default') }}:</strong> {{ t('settings.layoutSettings.displayDensityDetails.default') }}</li>
                            <li><strong>{{ t('settings.layoutSettings.displayDensityOptions.medium') }}:</strong> {{ t('settings.layoutSettings.displayDensityDetails.medium') }}</li>
                            <li><strong>{{ t('settings.layoutSettings.displayDensityOptions.compact') }}:</strong> {{ t('settings.layoutSettings.displayDensityDetails.compact') }}</li>
                        </ul>
                        <span class="warning-text">{{ t('settings.layoutSettings.displayDensityWarning') }}</span>
                    </div>
                </div>
                
                <!-- Add Card Info Display setting -->
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="cardInfoDisplay">{{ t('settings.layoutSettings.cardInfoDisplay') }}</label>
                        </div>
                        <div class="setting-control select-control">
                            <select id="cardInfoDisplay" onchange="settingsManager.saveSelectSetting('cardInfoDisplay', 'card_info_display')">
                                <option value="always">{{ t('settings.layoutSettings.cardInfoDisplayOptions.always') }}</option>
                                <option value="hover">{{ t('settings.layoutSettings.cardInfoDisplayOptions.hover') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.layoutSettings.cardInfoDisplayHelp') }}
                        <ul class="list-description">
                            <li><strong>{{ t('settings.layoutSettings.cardInfoDisplayOptions.always') }}:</strong> {{ t('settings.layoutSettings.cardInfoDisplayDetails.always') }}</li>
                            <li><strong>{{ t('settings.layoutSettings.cardInfoDisplayOptions.hover') }}:</strong> {{ t('settings.layoutSettings.cardInfoDisplayDetails.hover') }}</li>
                        </ul>
                    </div>
                </div>
                
                <!-- Language Selection -->
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="languageSelect">{{ t('common.language.select') }}</label>
                        </div>
                        <div class="setting-control select-control">
                            <select id="languageSelect" onchange="settingsManager.saveLanguageSetting()">
                                <option value="en">{{ t('common.language.english') }}</option>
                                <option value="zh-CN">{{ t('common.language.chinese_simplified') }}</option>
                                <option value="zh-TW">{{ t('common.language.chinese_traditional') }}</option>
                                <option value="ru">{{ t('common.language.russian') }}</option>
                                <option value="de">{{ t('common.language.german') }}</option>
                                <option value="ja">{{ t('common.language.japanese') }}</option>
                                <option value="ko">{{ t('common.language.korean') }}</option>
                                <option value="fr">{{ t('common.language.french') }}</option>
                                <option value="es">{{ t('common.language.spanish') }}</option>
                                <option value="he">{{ t('common.language.Hebrew') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('common.language.select_help') }}
                    </div>
                </div>
            </div>
            
            <!-- Add Folder Settings Section -->
            <div class="settings-section">
                <h3>{{ t('settings.sections.folderSettings') }}</h3>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="defaultLoraRoot">{{ t('settings.folderSettings.defaultLoraRoot') }}</label>
                        </div>
                        <div class="setting-control select-control">
                            <select id="defaultLoraRoot" onchange="settingsManager.saveSelectSetting('defaultLoraRoot', 'default_lora_root')">
                                <option value="">{{ t('settings.folderSettings.noDefault') }}</option>
                                <!-- Options will be loaded dynamically -->
                            </select>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.folderSettings.defaultLoraRootHelp') }}
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="defaultCheckpointRoot">{{ t('settings.folderSettings.defaultCheckpointRoot') }}</label>
                        </div>
                        <div class="setting-control select-control">
                            <select id="defaultCheckpointRoot" onchange="settingsManager.saveSelectSetting('defaultCheckpointRoot', 'default_checkpoint_root')">
                                <option value="">{{ t('settings.folderSettings.noDefault') }}</option>
                                <!-- Options will be loaded dynamically -->
                            </select>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.folderSettings.defaultCheckpointRootHelp') }}
                    </div>
                </div>

                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="defaultEmbeddingRoot">{{ t('settings.folderSettings.defaultEmbeddingRoot') }}</label>
                        </div>
                        <div class="setting-control select-control">
                            <select id="defaultEmbeddingRoot" onchange="settingsManager.saveSelectSetting('defaultEmbeddingRoot', 'default_embedding_root')">
                                <option value="">{{ t('settings.folderSettings.noDefault') }}</option>
                                <!-- Options will be loaded dynamically -->
                            </select>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.folderSettings.defaultEmbeddingRootHelp') }}
                    </div>
                </div>
            </div>

            <!-- Default Path Customization Section -->
            <div class="settings-section">
                <h3>{{ t('settings.downloadPathTemplates.title') }}</h3>
                
                <div class="setting-item">
                    <div class="input-help">
                        {{ t('settings.downloadPathTemplates.help') }}
                        <div class="placeholder-info">
                            <strong>{{ t('settings.downloadPathTemplates.availablePlaceholders') }}</strong>
                            <span class="placeholder-tag">{base_model}</span>
                            <span class="placeholder-tag">{author}</span>
                            <span class="placeholder-tag">{first_tag}</span>
                        </div>
                    </div>
                </div>

                <!-- LoRA Template Configuration -->
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="loraTemplatePreset">{{ t('settings.downloadPathTemplates.modelTypes.lora') }}</label>
                        </div>
                        <div class="setting-control select-control">
                            <select id="loraTemplatePreset" onchange="settingsManager.updateTemplatePreset('lora', this.value)">
                                <option value="">{{ t('settings.downloadPathTemplates.templateOptions.flatStructure') }}</option>
                                <option value="{base_model}">{{ t('settings.downloadPathTemplates.templateOptions.byBaseModel') }}</option>
                                <option value="{author}">{{ t('settings.downloadPathTemplates.templateOptions.byAuthor') }}</option>
                                <option value="{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.byFirstTag') }}</option>
                                <option value="{base_model}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelFirstTag') }}</option>
                                <option value="{base_model}/{author}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthor') }}</option>
                                <option value="{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.authorFirstTag') }}</option>
                                <option value="{base_model}/{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthorFirstTag') }}</option>
                                <option value="custom">{{ t('settings.downloadPathTemplates.templateOptions.customTemplate') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="template-custom-row" id="loraCustomRow" style="display: none;">
                        <input type="text" id="loraCustomTemplate" class="template-custom-input" placeholder="{{ t('settings.downloadPathTemplates.customTemplatePlaceholder') }}" />
                        <div class="template-validation" id="loraValidation"></div>
                    </div>
                    <div class="template-preview" id="loraPreview"></div>
                </div>

                <!-- Checkpoint Template Configuration -->
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="checkpointTemplatePreset">{{ t('settings.downloadPathTemplates.modelTypes.checkpoint') }}</label>
                        </div>
                        <div class="setting-control select-control">
                            <select id="checkpointTemplatePreset" onchange="settingsManager.updateTemplatePreset('checkpoint', this.value)">
                                <option value="">{{ t('settings.downloadPathTemplates.templateOptions.flatStructure') }}</option>
                                <option value="{base_model}">{{ t('settings.downloadPathTemplates.templateOptions.byBaseModel') }}</option>
                                <option value="{author}">{{ t('settings.downloadPathTemplates.templateOptions.byAuthor') }}</option>
                                <option value="{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.byFirstTag') }}</option>
                                <option value="{base_model}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelFirstTag') }}</option>
                                <option value="{base_model}/{author}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthor') }}</option>
                                <option value="{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.authorFirstTag') }}</option>
                                <option value="{base_model}/{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthorFirstTag') }}</option>
                                <option value="custom">{{ t('settings.downloadPathTemplates.templateOptions.customTemplate') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="template-custom-row" id="checkpointCustomRow" style="display: none;">
                        <input type="text" id="checkpointCustomTemplate" class="template-custom-input" placeholder="{{ t('settings.downloadPathTemplates.customTemplatePlaceholder') }}" />
                        <div class="template-validation" id="checkpointValidation"></div>
                    </div>
                    <div class="template-preview" id="checkpointPreview"></div>
                </div>

                <!-- Embedding Template Configuration -->
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="embeddingTemplatePreset">{{ t('settings.downloadPathTemplates.modelTypes.embedding') }}</label>
                        </div>
                        <div class="setting-control select-control">
                            <select id="embeddingTemplatePreset" onchange="settingsManager.updateTemplatePreset('embedding', this.value)">
                                <option value="">{{ t('settings.downloadPathTemplates.templateOptions.flatStructure') }}</option>
                                <option value="{base_model}">{{ t('settings.downloadPathTemplates.templateOptions.byBaseModel') }}</option>
                                <option value="{author}">{{ t('settings.downloadPathTemplates.templateOptions.byAuthor') }}</option>
                                <option value="{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.byFirstTag') }}</option>
                                <option value="{base_model}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelFirstTag') }}</option>
                                <option value="{base_model}/{author}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthor') }}</option>
                                <option value="{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.authorFirstTag') }}</option>
                                <option value="{base_model}/{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthorFirstTag') }}</option>
                                <option value="custom">{{ t('settings.downloadPathTemplates.templateOptions.customTemplate') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="template-custom-row" id="embeddingCustomRow" style="display: none;">
                        <input type="text" id="embeddingCustomTemplate" class="template-custom-input" placeholder="{{ t('settings.downloadPathTemplates.customTemplatePlaceholder') }}" />
                        <div class="template-validation" id="embeddingValidation"></div>
                    </div>
                    <div class="template-preview" id="embeddingPreview"></div>
                </div>
            </div>

            <div class="setting-item">
                <div class="setting-row">
                    <div class="setting-info">
                        <label>{{ t('settings.downloadPathTemplates.baseModelPathMappings') }}</label>
                    </div>
                    <div class="setting-control">
                        <button type="button" class="add-mapping-btn" onclick="settingsManager.addMappingRow()">
                            <i class="fas fa-plus"></i>
                            <span>{{ t('settings.downloadPathTemplates.addMapping') }}</span>
                        </button>
                    </div>
                </div>
                <div class="input-help">
                    {{ t('settings.downloadPathTemplates.baseModelPathMappingsHelp') }}
                </div>
                <div class="mappings-container">
                    <div id="baseModelMappingsContainer">
                        <!-- Mapping rows will be added dynamically -->
                    </div>
                </div>
            </div>

            <!-- Add Example Images Settings Section -->
            <div class="settings-section">
                <h3>{{ t('settings.sections.exampleImages') }}</h3>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="exampleImagesPath">{{ t('settings.exampleImages.downloadLocation') }} <i class="fas fa-sync-alt restart-required-icon" title="{{ t('settings.exampleImages.restartRequired') }}"></i></label>
                        </div>
                        <div class="setting-control path-control">
                            <input type="text" id="exampleImagesPath" placeholder="{{ t('settings.exampleImages.downloadLocationPlaceholder') }}" />
                            <button id="exampleImagesDownloadBtn" class="primary-btn">
                                <i class="fas fa-download"></i> <span id="exampleDownloadBtnText">{{ t('settings.exampleImages.download') }}</span>
                            </button>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.exampleImages.downloadLocationHelp') }}
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="autoDownloadExampleImages">{{ t('settings.exampleImages.autoDownload') }}</label>
                        </div>
                        <div class="setting-control">
                            <label class="toggle-switch">
                                <input type="checkbox" id="autoDownloadExampleImages" checked 
                                       onchange="settingsManager.saveToggleSetting('autoDownloadExampleImages', 'auto_download_example_images')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.exampleImages.autoDownloadHelp') }}
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="optimizeExampleImages">{{ t('settings.exampleImages.optimizeImages') }}</label>
                        </div>
                        <div class="setting-control">
                            <label class="toggle-switch">
                                <input type="checkbox" id="optimizeExampleImages" checked 
                                       onchange="settingsManager.saveToggleSetting('optimizeExampleImages', 'optimize_example_images')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.exampleImages.optimizeImagesHelp') }}
                    </div>
                </div>
            </div>
            
            <!-- Metadata Archive Section -->
            <div class="settings-section">
                <h3>{{ t('settings.sections.metadataArchive') }}</h3>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="enableMetadataArchive">{{ t('settings.metadataArchive.enableArchiveDb') }}:</label>
                        </div>
                        <div class="setting-control">
                            <label class="toggle-switch">
                                <input type="checkbox" id="enableMetadataArchive" onchange="settingsManager.saveToggleSetting('enableMetadataArchive', 'enable_metadata_archive_db')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.metadataArchive.enableArchiveDbHelp') }}
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="metadata-archive-status" id="metadataArchiveStatus">
                        <!-- Status will be populated by JavaScript -->
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label>{{ t('settings.metadataArchive.management') }}:</label>
                        </div>
                        <div class="setting-control">
                            <button type="button" id="downloadMetadataArchiveBtn" class="primary-btn" onclick="settingsManager.downloadMetadataArchive()">
                                {{ t('settings.metadataArchive.downloadButton') }}
                            </button>
                            <button type="button" id="removeMetadataArchiveBtn" class="danger-btn" onclick="settingsManager.removeMetadataArchive()" style="margin-left: 10px;">
                                {{ t('settings.metadataArchive.removeButton') }}
                            </button>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.metadataArchive.managementHelp') }}
                    </div>
                </div>
            </div>

            <!-- Proxy Settings Section -->
            <div class="settings-section">
                <h3>{{ t('settings.sections.proxySettings') }}</h3>
                
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="proxyEnabled">{{ t('settings.proxySettings.enableProxy') }}</label>
                        </div>
                        <div class="setting-control">
                            <label class="toggle-switch">
                                <input type="checkbox" id="proxyEnabled" 
                                       onchange="settingsManager.saveToggleSetting('proxyEnabled', 'proxy_enabled')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.proxySettings.enableProxyHelp') }}
                    </div>
                </div>

                <div class="proxy-settings-group" id="proxySettingsGroup" style="display: none;">
                    <div class="setting-item">
                        <div class="setting-row">
                            <div class="setting-info">
                                <label for="proxyType">{{ t('settings.proxySettings.proxyType') }}</label>
                            </div>
                            <div class="setting-control select-control">
                                <select id="proxyType" onchange="settingsManager.saveSelectSetting('proxyType', 'proxy_type')">
                                    <option value="http">HTTP</option>
                                    <option value="https">HTTPS</option>
                                    <option value="socks4">SOCKS4</option>
                                    <option value="socks5">SOCKS5</option>
                                </select>
                            </div>
                        </div>
                        <div class="input-help">
                            {{ t('settings.proxySettings.proxyTypeHelp') }}
                        </div>
                    </div>

                    <div class="setting-item">
                        <div class="setting-row">
                            <div class="setting-info">
                                <label for="proxyHost">{{ t('settings.proxySettings.proxyHost') }}</label>
                            </div>
                            <div class="setting-control">
                                <div class="text-input-wrapper">
                                    <input type="text" id="proxyHost" 
                                           placeholder="{{ t('settings.proxySettings.proxyHostPlaceholder') }}"
                                           onblur="settingsManager.saveInputSetting('proxyHost', 'proxy_host')"
                                           onkeydown="if(event.key === 'Enter') { this.blur(); }" />
                                </div>
                            </div>
                        </div>
                        <div class="input-help">
                            {{ t('settings.proxySettings.proxyHostHelp') }}
                        </div>
                    </div>

                    <div class="setting-item">
                        <div class="setting-row">
                            <div class="setting-info">
                                <label for="proxyPort">{{ t('settings.proxySettings.proxyPort') }}</label>
                            </div>
                            <div class="setting-control">
                                <div class="text-input-wrapper">
                                    <input type="text" id="proxyPort" 
                                           placeholder="{{ t('settings.proxySettings.proxyPortPlaceholder') }}"
                                           onblur="settingsManager.saveInputSetting('proxyPort', 'proxy_port')"
                                           onkeydown="if(event.key === 'Enter') { this.blur(); }" />
                                </div>
                            </div>
                        </div>
                        <div class="input-help">
                            {{ t('settings.proxySettings.proxyPortHelp') }}
                        </div>
                    </div>

                    <div class="setting-item">
                        <div class="setting-row">
                            <div class="setting-info">
                                <label for="proxyUsername">{{ t('settings.proxySettings.proxyUsername') }}</label>
                            </div>
                            <div class="setting-control">
                                <div class="text-input-wrapper">
                                    <input type="text" id="proxyUsername" 
                                           placeholder="{{ t('settings.proxySettings.proxyUsernamePlaceholder') }}"
                                           onblur="settingsManager.saveInputSetting('proxyUsername', 'proxy_username')"
                                           onkeydown="if(event.key === 'Enter') { this.blur(); }" />
                                </div>
                            </div>
                        </div>
                        <div class="input-help">
                            {{ t('settings.proxySettings.proxyUsernameHelp') }}
                        </div>
                    </div>

                    <div class="setting-item">
                        <div class="setting-row">
                            <div class="setting-info">
                                <label for="proxyPassword">{{ t('settings.proxySettings.proxyPassword') }}</label>
                            </div>
                            <div class="setting-control">
                                <div class="api-key-input">
                                    <input type="password" id="proxyPassword" 
                                           placeholder="{{ t('settings.proxySettings.proxyPasswordPlaceholder') }}"
                                           onblur="settingsManager.saveInputSetting('proxyPassword', 'proxy_password')"
                                           onkeydown="if(event.key === 'Enter') { this.blur(); }" />
                                    <button class="toggle-visibility">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="input-help">
                            {{ t('settings.proxySettings.proxyPasswordHelp') }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Misc. Section -->
            <div class="settings-section">
                <h3>{{ t('settings.sections.misc') }}</h3>
                <div class="setting-item">
                    <div class="setting-row">
                        <div class="setting-info">
                            <label for="includeTriggerWords">{{ t('settings.misc.includeTriggerWords') }}</label>
                        </div>
                        <div class="setting-control">
                            <label class="toggle-switch">
                                <input type="checkbox" id="includeTriggerWords" 
                                       onchange="settingsManager.saveToggleSetting('includeTriggerWords', 'include_trigger_words')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    <div class="input-help">
                        {{ t('settings.misc.includeTriggerWordsHelp') }}
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>
